<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/png" sizes="16x16" class="appIcon" icon="icon16" href="https://www.bmob.cn/themes/2016-3/static/img/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <script src="./bmob.js"></script>
    <script src="./record.js"></script>
    <title>Search Page</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }

        html {
            width: 100vw;
            height: 100vh;
            background-image: url("https://www.bing.com/th?id=OHR.BerchtesgadenerAlpen_EN-CN3057551877_UHD.jpg&rf=LaDigue_UHD.jpg&w=3840&h=2160&c=8&rs=1&o=3&r=0");
            background-size: cover;
        }

        body {
            overflow: hidden;
        }

        /* 提示信息 */
        .info {
            width: 220px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.5);
            position: fixed;
            left: 50%;
            top: 20px;
            transform: translateX(-50%);
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
            color: rgba(255, 255, 255, 0.8);
            user-select: none;
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
            top: -20px;
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.4s ease-in-out;
        }

        [cloak] {
            display: none;
        }


        /* 中间搜索框 */
        .searchBox {
            width: 60%;
            min-width: 400px;
            height: 30vh;
            margin: 0vh auto 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .clock {
            color: beige;
            width: 100%;
            height: 60px;
            margin-bottom: 20px;
            /*color: rgba(255, 255, 255, 0.6);*/
            font-size: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: "Monoton";
        }

        .clock > p {
            user-select: none;
        }

        .inputBox {
            width: 60%;
            height: 44px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.5);
            padding: 0 15px;
            border-radius: 20px;
        }

        .inputBox > input {
            background: none;
            border: none;
            outline: none;
            padding: 0 10px 0 0;
            flex: 1;
            height: 44px;
            color: #242323;
            font-size: 16px;
        }

        .inputBox > input::placeholder {
            color: #242323;
            font-size: 16px;
        }

        .inputBox > img {
            width: 1.3rem;
            height: 1.3rem;
        }

        .inputBox > img:hover {
            cursor: pointer;
        }
    </style>
    <style>
        .historySection {
            margin: 0 auto;
            width: 70%;
            display: flex;
            justify-content: space-between;
            padding: 10px 10px 30px;
            box-sizing: border-box;
            height: 70vh;
        }

        .historyDiv {
            background-color: rgba(255, 255, 255, 0.5);
            padding: 10px;
            display: flex;
            flex-direction: column;
            width: 100%;
            border-radius: 5px;
        }

        .historyBar {
            line-height: 30px;
            height: 30px;
        }

        .historyBar span {
            font-size: 20px;
            font-weight: bold;
        }

        .historyBar img {
            float: right;
            width: 20px;
            cursor: pointer;
        }

        .historyBar img:hover {
            animation: rotate 5s;
            -webkit-animation: rotate 5s; /* Safari 与 Chrome */
            animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
        }

        @keyframes rotate {
            from {
                transform: rotate(0);
            }
            to {
                transform: rotate(360deg)
            }
        }

        @-webkit-keyframes rotate /* Safari 与 Chrome */
        {
            from {
                transform: rotate(0);
            }
            to {
                transform: rotate(360deg)
            }
        }

        #list {
            padding: 5px 40px;
            height: calc(100% - 30px);
            overflow-y: scroll;
        }

        #list::-webkit-scrollbar-track-piece {
            background-color: #f8f8f8;
        }

        #list::-webkit-scrollbar {
            width: 1px;
            height: 9px;
        }

        #list::-webkit-scrollbar-thumb {
            background-color: #dddddd;
            background-clip: padding-box;
            min-height: 28px;
        }

        #list::-webkit-scrollbar-thumb:hover {
            background-color: #bbb;
        }

        #list li {
            margin-bottom: 5px;
            line-height: 25px;
            /*height: 25px;*/
            position: relative;
            text-decoration: none;
            color: black;
            transition: color .3s ease;
            cursor: crosshair;
        }

        #list li::after {
            --scale: 0;
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            height: 3px;
            background: #ff1721;
            -webkit-transform: scaleX(var(--scale));
            transform: scaleX(var(--scale));
            -webkit-transform-origin: var(--x) 0%;
            transform-origin: var(--x) 0%;
            transition: -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
            transition: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
            transition: transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.535, 0.05, 0.355, 1);
        }

        #list li:hover::after {
            --scale: 1;
        }

        #list li div {
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
    <style>
        .listColor {
            position: absolute;
            top: 2px;
            left: 2px;
            padding: 10px;
            display: flex;
            background: #ffffff55;
        }

        .dot {
            margin: 0 5px;
            width: 10px;
            height: 10px;
            border-radius: 10px;
        }
    </style>
    <style>
        .loading {
            position: absolute;
            width: 100vw;
            height: 100vh;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.1);
            color: white;
            font-size: 20px;
            line-height: 20px;
            padding: 40% 0;
            text-align: center;
            display: none;
        }
    </style>
    <!--  <link rel="shortcut icon" href="./img/logo.ico" type="image/x-icon">-->
</head>
<body>
<div class="listColor" style="cursor: pointer">
    <div class="dot" style="background: red;"></div>
    <div class="dot" style="background: blue;"></div>
    <div class="dot" style="background: green;"></div>
    <div class="dot" style="background: yellow;"></div>
</div>
<div class="loading" id="loading">
    等待...
</div>
<div id="app">
    <!-- 搜索框 -->
    <section class="searchBox">
        <div class="clock">
            <p id="AP"></p>
            <p id="year"></p>◌
            <p id="month"></p>◌
            <p id="day"></p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <p id="hour"></p>
            <p id="minute"></p>
            <p id="second"></p>
        </div>
        <div class="inputBox">
            <input type="text" placeholder="搜索" id="searchInput" onkeypress="keyPress()" ondblclick="this.value=''"/>
            <img src=""
                 alt="" onclick="search()"/>
        </div>
    </section>
    <section class="historySection">
        <div class="historyDiv">
            <div class="historyBar">
                <span>历史记录</span>
                <img src=""
                     onclick="refleshQuestion()" alt=""/>
            </div>
            <ol id="list">

            </ol>
        </div>
    </section>
</div>
<script>
    let listColors = ['red', 'blue', 'green', 'yellow','white'];
    let list = null;
    let loading = null;
    let openHistory = function () {
        let his = document.getElementsByClassName('historySection')[0];
        // his.style.maxHeight = '70vh';
        // his.style.height = '70vh';
        openHistory = () => {};
    };

    function initTimes() {
        // 时钟代码
        let AP = document.getElementById("AP");
        let year_text = document.getElementById("year");
        let month_text = document.getElementById("month");
        let day_text = document.getElementById("day");
        let hour_text = document.getElementById("hour");
        let minute_text = document.getElementById("minute");
        let second_text = document.getElementById("second");
        let to2 = n => {
            if (n < 10) {
                return '0' + n;
            } else {
                return n;
            }
        }
        let timer = setInterval(function () {
            let date = new Date();
            let year = date.getFullYear();
            let month = to2(date.getMonth() + 1);
            let day = date.getDate();
            let hour = date.getHours();
            let minute = date.getMinutes();
            let second = date.getSeconds();
            if (hour < 12) {
                AP.innerHTML = `◒`;
            } else {
                AP.innerHTML = `◓`;
            }
            year_text.innerHTML = year;
            month_text.innerHTML = month;
            day_text.innerHTML = day;
            hour_text.innerHTML = to2(hour) + ":";
            minute_text.innerHTML = to2(minute) + ":";
            second_text.innerHTML = to2(second);
        }, 100);
    }

    function initRecord() {
        Bmob.initialize('693f7e27f97550ba', 'IBAS12');
        Bmob.User.login('ibas', 'ibas').then(console.log);
        window.record = new Record();
    }

    function searchByBaidu(question) {
        window.open(`https://www.baidu.com/s?wd=${question}`,'_blank');
    }
    function keyPress() {
        if (event.keyCode == 13) {
            search();
        }
    }
    function search() {
        let question = document.getElementById('searchInput').value;
        if (question) {
            loading.loading();
            window.record.add(question,"")
            .then(() => {
                loading.close();
                searchByBaidu(question);
                document.getElementById('searchInput').value = '';
            });
        }
    }

    function returnDot(index) {
        return `<div class="dot" style="margin-top:7.5px;line-height: 25px;margin-left: 5px;display:inline-block;background: ${listColors[index]}"></div>`;
    }

    window.onload = function () {
        list = document.getElementById('list');
        loading = new (class {
            constructor() {
                this.dom = document.getElementById('loading');
            }
            loading() {
                this.dom.style.display = 'block';
            }
            close() {
                this.dom.style.display = 'none';
            }
        });
        initTimes();
        // 设置input框自动获取焦点
        let searchInput = document.getElementById("searchInput");
        searchInput.focus();
        initRecord();
        // refleshQuestion();
    };

    function refleshQuestion() {
        openHistory();
        let toIndex = answer => {
            let a = answer.toLowerCase();
            switch (a) {
                case 'a':
                    return 0;
                case 'b':
                    return 1;
                case 'c':
                    return 2;
                case 'd':
                    return 3;
                default:
                    return 4;
            }
        };
        loading.loading();
        window.record.getAll()
        .then(qs => {
            loading.close();
            let html = "";
            qs.forEach(q => {
                let index = toIndex(q.answer);
                let appendHtml = ``;
                if (index === 4 && q.answer) {
                    appendHtml = `<div style="font-size: 15px;">${q.answer}</div>`;
                }
                html += `<li><div class="question-div" style="display: flex;" title="${q.question}">
            <div style="width: calc(100% - 15px);">${q.question}</div>${returnDot(index)}
            </div>${appendHtml}</li>`;
            });
            list.innerHTML = html;
            let the_qs = document.getElementsByClassName('question-div');
            for (let i = 0;i < the_qs.length;i++) {
                the_qs[i].onclick = function () {
                    let q = this.getAttribute('title');
                    searchByBaidu(q);
                };
            }
        });
    }
</script>
</body>
</html>
